import React from "react";
import {getView} from "../../component";
import FieldLock from "../../content/view/FieldLock";

export default class FieldView extends React.Component {
  render() {
    const { field, isShowLock, className, ...rest } = this.props;
    const ComponentView = getView(field.type);

    if(!ComponentView) return ComponentView;

    const type = field.config.complex ? 'complex' : 'single';
    const visible = isShowLock && field.config.hidden == 1;
    const clsNameStr = `wea-edc-form-item wea-edc-${type}-field wea-edc-${field.type.toLowerCase()}-view`;

    return (
      <div
        data-id={field.uuid}
        className={`${clsNameStr} ${className || ''}`}
      >
        <FieldLock ecId={`${this && this.props && this.props.ecId || ''}_FieldLock@jbekpc`} visible={visible} />
        <ComponentView ecId={`${this && this.props && this.props.ecId || ''}_ComponentView@371k2z`}
          type={field.type}
          value={field.value}
          uuid={field.uuid}
          data={field.config}
          {...rest}
        >
          {this.props.children}
        </ComponentView>
      </div>
    );
  }
}

FieldView.defaultProps = {
  isShowLock: false,
  className: '',
  onChange: () => { }
};